<template>
  <div class="batchBox">
    <el-row class="accountCon">
      <el-col class="leftCon" :span="4">
        <div class="label1">
          <i class="el-icon-collection-tag" /> 案例信息
          <img src="@/assets/images/triangle.png" alt />
        </div>
      </el-col>
      <el-col class="rightCon" :span="20">
        <el-form
          ref="detail"
          label-position="right"
          label-width="180px"
          :rules="rules"
          :model="detail"
        >
          <el-form-item v-if="!id" label="客户姓名:" prop="customer_id">
            <el-select
              v-model="detail.customer_id"
              filterable
              remote
              placeholder="请输入客户姓名"
              :remote-method="remoteMethod"
              :loading="loading"
              class="w300"
              @change="changeUid"
            >
              <el-option
                v-for="item in options.customer_id"
                :key="item.id"
                :label="item.customer_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-else label="客户姓名:">
            <span class="ml10 c666">{{customer_name}}</span>
          </el-form-item>
          <el-form-item v-if="!id" label="手机号:">
            <span class="ml10 c666">{{telephone}}</span>
          </el-form-item>
          <el-form-item v-if="!id" label="性别:">
            <span class="ml10 c666">{{sex}}</span>
          </el-form-item>
          
          <el-form-item label="品项一级:" prop="item_one">
            <el-select
              v-model="detail.item_one"
              class="w200"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options.firstLevel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="品项二级:" prop="item_two">
            <el-select v-model="detail.item_two" class="w200" clearable placeholder="请选择">
              <el-option
                v-for="item in options.secondLevel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        <el-form-item label="品项三级:" prop="item_three">
          <el-select v-model="detail.item_three" class="w200" clearable placeholder="请选择">
            <el-option
              v-for="item in options.thirdLevel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="是否毕业:">
            <el-radio-group v-model="detail.graduation_type">
              <el-radio :label="1">已毕业</el-radio>
              <el-radio :label="2">治疗中断</el-radio>
              <el-radio :label="3">修护中</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-button
            type="primary"
            size="mini"
            class="mainBtn"
            @click="submitForm('detail')"
          >完成，提交案例</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addCase, caseDetail, saveCase } from "@/api/case";
import { ssettingList, clientList } from "@/api/client";
import { traverseCategories } from '@/utils/constants';
import { goodsTypeList } from '@/api/goods';
class Detail {
  customer_id = "";
  firstLevel = "";
  shop_id = "";
  secondLevel = "";
  thirdLevel = "";
  graduation_type = 1;
}
class Rules {
  customer_id = [
    { required: true, message: "请填写客户名称", trigger: "blur" }
  ];
  firstLevel = [
    { required: true, message: "请选择", trigger: "change" }
  ];
  secondLevel = [
    { required: true, message: "请选择", trigger: "change" }
  ];
  thirdLevel = [{ required: true, message: "请选择", trigger: "change" }];
}
class Options {
  customer_id = [];
  firstLevel = [];
  secondLevel = [];
  thirdLevel = [];
}
export default {
  data() {
    return {
      options: new Options(), // 选项
      detail: new Detail(),
      rules: new Rules(),
      loading: false,
      sex: "未知",
      telephone: "未知",
      customer_name: "未知",
      id: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    if (this.id) this.getDetail();
    this.getOptions();
  },
  methods: {
    // 获取选项
    getOptions() {
        goodsTypeList({ type: 'name' }).then(res => {
          const categories = traverseCategories(res.data);
          // 赋值时使用正确的属性名
          this.options.firstLevel = categories.firstLevel;
          this.options.secondLevel = categories.secondLevel;
          this.options.thirdLevel = categories.thirdLevel;
        });
    },
    // 获取详情信息
    getDetail() {
      caseDetail({ case_id: this.$route.query.id }).then(res => {
        this.detail.customer_id = res.data.customer_id;
        this.customer_name = res.data.customer_name;
        this.detail.firstLevel = res.data.firstLevel;
        this.detail.secondLevel = res.data.secondLevel;
        this.detail.thirdLevel = res.data.thirdLevel;
      });
    },
    // 搜索客户
    remoteMethod(name) {
      if (name !== "") {
        this.loading = true;
        clientList({ customer_name: name, page: 1, limit: 1000000 }).then(
          res => {
            this.loading = false;
            this.options.customer_id = res.list;
          }
        );
      } else {
        this.options.customer_id = [];
      }
    },
    // 选择客户
    async changeUid(id) {
      this.options.customer_id.forEach(item => {
        if (id == item.id) {
          this.telephone = item.telephone ? item.telephone : "未知";
          this.sex = item.sex ? item.sex : "未知";
          this.detail.shop_id = item.shop_id;
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$route.query.id ? this.hint("更新") : this.hint("新建");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 提示
    hint(text) {
      this.$confirm(`确定${text}此案例吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.confirm();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 确认提交
    confirm() {
      if (this.$route.query.id) {
        saveCase({ ...this.detail, case_id: this.$route.query.id }).then(
          res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.$router.push("./caseList");
          }
        );
      } else {
        addCase({ ...this.detail }).then(res => {
          this.$message({
            type: "success",
            message: res.msg
          });
          this.$router.push("./caseList");
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.accountCon {
  background: #fff;
  .leftCon {
    background: #fcfcfc;
    border-right: 1px solid #eee;
    position: absolute;
    height: 100%;
    > div {
      line-height: 48px;
      color: #fff;
      background: #9ea7b4;
      width: 100%;
      padding-left: 80px;
      font-size: 14px;
      box-sizing: border-box;
      img {
        position: absolute;
        right: -30px;
        width: 40px;
        height: 48px;
      }
    }
    .label1 {
      position: absolute;
      top: 40px;
    }
    .label2 {
      position: absolute;
      top: 270px;
    }
  }
  .rightCon {
    padding: 40px 0 0 400px;
    .btn {
      margin: 20px 0 50px 80px;
    }
    .mainBtn {
      margin: 30px 0 0 240px;
    }
    .phoneTip {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
